<template>
  <el-breadcrumb
    separator="/"
    :separator-icon="ArrowRight"
    class="navbar-breadcrumb"
  >
    <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">
      <transition v-if="isLastItem(index)" name="breadcrumb-current" appear>
        <span :key="route.fullPath">{{ getTitle(item) }}</span>
      </transition>
      <span v-else>{{ getTitle(item) }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { useI18n } from "#imports";
import { ArrowRight } from "@element-plus/icons-vue";
import { computed } from "vue";
const routerStore = useStore.routerStore();
const route = useRoute();
const { locale } = useI18n();
const breadcrumb = computed(() => {
  let path = route.path;
  if (!isCnLocale(locale.value)) {
    const idx = path.indexOf("/", 2);
    path = route.path.substring(idx);
  }
  const breadcrumbs = routerStore.getBreadcrumbs(path);
  return breadcrumbs;
});
const getTitle = (meta: any) => {
  return getLocaleTitle(locale.value, meta);
};
const isLastItem = (index: number) => {
  return index === breadcrumb.value.length - 1;
};
</script>

<style lang="less" scoped>
.navbar-breadcrumb {
  ::v-deep(.el-breadcrumb__inner) {
    color: var(--theme-header-text-color) !important;
  }
}
.navbar-breadcrumb {
  ::v-deep(.el-breadcrumb__item:not(:first-child) .el-breadcrumb__inner) {
    color: #8c8c8c !important;
  }
}
.breadcrumb-current-enter-active {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}
.breadcrumb-current-enter-from {
  opacity: 0;
  transform: translateX(40px);
}
.breadcrumb-current-enter-to {
  opacity: 1;
  transform: translateX(0);
}
.el-breadcrumb-item {
  display: inline-flex;
  align-items: center;
}
</style>
